<template>
  <div>
    <!-- 顶部组件 -->
    <header-nav></header-nav>
    <div class="main">
      <!-- <div class="box">
        <div class="img"></div>
        <div class="test">
          <p>1</p>
          <p>2</p>
          <p>3</p>
        </div>
      </div> -->
      <div class="box" v-for="(item, index) in playlist" :key="index">
        <router-link tag="div" class="img" :to="'/rank/ranklist?id='+item.id">
          <img :src="item.coverImgUrl" />
        </router-link>
        <div class="test">
          <p
            v-for="(key, index) in item.tracks"
            :key="key.id"
            v-show="index < 3"
          >
            {{ index + 1 }}.{{ key.name }}-{{ key.ar[0].name }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerNav from "../components/base/headerNav.vue";
import { getToplist, getPlaylistDetail } from "../api/rank";
export default {
  components: { headerNav },
  data: function () {
    return {
      playlist: [],
    };
  },
  beforeRouteEnter(to, from, next) {
    getToplist().then((data) => {
      next((vm) => vm.getPlaylistDetailFun(data.list));
    });
  },
  methods: {
    getPlaylistDetailFun(list) {
      for (let i = 0; i < list.length; i++) {
        let id = list[i].id;
        getPlaylistDetail({ id: id }).then((data) => {
          this.playlist.push(data.playlist);
        });
      }
      // console.log(this.playlist);
    },
  },
  // created() {
  //   getRankingList().then((data) => {
  //     console.log(data);
  //     this.ranks = data.list;
  //   });
  // },
};
</script>

<style lang="less">
.main {
  .box {
    display: flex;
    width: 96%;
    margin: 0 auto;
    border-bottom: 1px solid #999;
    padding: 6px 0;
    .img {
      width: 100px;
      img {
        border-radius: 5px;
        width: 100%;
      }
    }
    .test {
      flex: 1;
      padding-left: 10px;
      p {
        color: #666;
        height: 27px;
        line-height: 27px;
        font-size: 12px;
        overflow: hidden;
      }
    }
  }
}
</style>